<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-tickets"></i> 客户端分组</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" icon="fa fa-refresh" class="handle-del mr10" @click="getGroups">刷新</el-button>
        <el-button type="primary" icon="el-icon-news" class="handle-del mr10" @click="handleAdd">新增</el-button>
      </div>
      <el-table :data="clientGroups"
                style="width: 100%"
                ref="multipleTable"
                border
                stripe
                fit>
        <el-table-column type="index" width="55"></el-table-column>
        <el-table-column prop="id" label="分组编号" sortable width="150">
        </el-table-column>
        <el-table-column prop="name" label="分组名称" sortable width="300">
        </el-table-column>

        <el-table-column prop="useable" label="启用" width="50" :formatter="useableFmt">
        </el-table-column>

        <el-table-column prop="remarks" label="备注">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleEdit(scope)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange"
                       layout="prev, pager, next"
                       :total="totalPage"
                       :page-size="pageSize">
        </el-pagination>
      </div>
    </div>

    <!-- 弹出对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="150px">
        <input type="hidden" name="groupId" :value="form.groupId" />

        <el-form-item label="分组名称">
          <el-input v-model="form.groupName" placeholder="请输入分组名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="form.useable">是否生效</el-checkbox>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remarks"
                    type="textarea"
                    :rows="5"
                    placeholder="请输入备注内容"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteRow">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        apiBaseUrl: "/api/ClientGroups/",
        idx: -1,
        totalPage: 1,
        curPage: 1,
        pageSize:20,
        clientGroups: [],
        editVisible: false,
        delVisible: false,
        dialogTitle: "新增",
        form: {
          groupId: "",
          groupName: "",
          useable: true,
          remarks: ""
        }
      }
    },
    methods: {
      // 分页导航
      handleCurrentChange(val) {
        this.curPage = val;
        this.getGroups();
      },
      getGroups() {
        var clientGroupsUrl = this.apiBaseUrl;
        this.$axios.get(clientGroupsUrl, {
          params: {
            pageNo: this.curPage,
            pageSize: this.pageSize
          }          
        })
          .then((res) => {
            var body = res.data;
            console.log(body);
            if (body && body.resultCode == 0) {
              this.clientGroups = body.data.pageData;
              this.totalPage = body.data.total;
            } else {
              this.clientGroups = [];
            }
          })
      },
      useableFmt(row, column, cellValue, index) {
        return cellValue ? "启用" : "禁用";
      },
      handleAdd() {
        this.form = {
          groupId: "",
          groupName: "",
          useable: true,
          remarks: ""
        };
        this.dialogTitle = "新增";
        this.editVisible = true;
      },
      handleEdit(scope) {
        this.dialogTitle = "编辑";
        let item = scope.row;
        console.log(item);
        if (item) {
          this.form.groupId = item.id;
          this.form.groupName = item.name;
          this.form.useable = item.useable;
          this.form.remarks = item.remarks;
        }
        this.editVisible = true;
      },
      handleDelete(scope) {
        this.delVisible = true;

        this.form.groupId = scope.row.id;

      },
      saveEdit() {
        if (!this.form.groupName) {
          this.$message.error("错误!!请输入分组名称");
          return;
        }
        //新增
        if (this.dialogTitle == "新增") {
          this.form.groupId = -1;
          this.$axios.post(this.apiBaseUrl, this.form)
            .then((res) => {
              var body = res.data;
              if (body && body.resultCode == 0) {
                this.clientGroups.push(body.data);
                this.$message.success("添加成功");
              } else {
                this.$message.error("添加失败,错误:" + body.resultMsg);
              }
            });
        }
        if (this.dialogTitle == "编辑") {
          let i = this.clientGroups.findIndex((val, i, arr) => {
            return val.id == this.form.groupId;
          });
          this.idx = i;
          if (i > -1) {
            let tmp = this.clientGroups[i];
            tmp.name = this.form.groupName;
            tmp.remarks = this.form.remarks;

            //编辑
            if (!this.form.groupId) {
              this.$message.error("修改失败,错误:非法修改,请刷新后重试");
              this.editVisible = false;
              return;
            }
            this.$axios.put(this.apiBaseUrl + this.form.groupId, this.form)
              .then((res) => {
                var body = res.data;
                if (body && body.resultCode == 0) {
                  this.$set(this.clientGroups, i, tmp);
                  this.$message.success("修改成功");
                } else {
                  this.$message.error("修改失败,错误:" + body.resultMsg);
                }
              });

          } else {
            this.$message.error("数据未找到，请刷新后重试");

          }
        }

        this.editVisible = false;

      },
      deleteRow() {
        let i = this.clientGroups.findIndex((val, i, arr) => {
          return val.id == this.form.groupId;
        });
        if (i > -1) {
          //删除
          this.$axios.delete(this.apiBaseUrl + this.form.groupId)
            .then((res) => {
              var body = res.data;
              if (body && body.resultCode == 0) {
                this.clientGroups.splice(i, 1);
                if (this.clientGroups.length < this.pageSize) {
                  this.curPage = 1;
                  this.getGroups();
                }
                this.$message.success("删除成功");
              } else {
                this.$message.error("删除失败,错误:" + body.resultMsg);
              }
            });
        } else {
          this.$message.error("删除失败,错误:记录不存在,请刷新后重试!");
        }
        this.delVisible = false;
      }
    },
    created() {
      this.getGroups();
    }
  }
</script>
<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .del-dialog-cnt {
    font-size: 16px;
    text-align: center
  }
</style>
